<template>
  <div class="tinymce-editor">
    <editor
      v-model="myValue"
      :init="init"
      :disabled="disabled"
      @onClick="onClick"
    >
    </editor>
  </div>
</template>

<script>
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver/theme";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/media";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/fullscreen";
import "tinymce/icons/default";
import { postAction, getFileAccessHttpUrl } from "@/utils/upload";

export default {
  components: {
    Editor
  },
  props: {
    value: {
      type: String,
      required: false
    },
    triggerChange: {
      type: Boolean,
      default: false,
      required: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    inline: {
      type: Boolean,
      default: false
    },
    height: {
      type: Number,
      default: 200
    },

    plugins: {
      type: [String, Array],
      default:
        "lists image link media table textcolor wordcount contextmenu fullscreen"
    },
    toolbar: {
      type: [String, Array],
      // media
      default:
        "undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists link unlink image  table | removeformat | fullscreen",
      branding: false
    }
  },
  data() {
    return {
      //初始化配置
      init: {
        inline: this.inline,
        language_url: "/tinymce/langs/zh_CN.js",
        language: "zh_CN",
        skin_url: "/tinymce/skins/lightgray",
        // max_width: 600,
        min_width: 200,
        min_height: 300,
        resize: "both",
        height: this.height,
        width: "100%",
        draggable_modal: true,
        plugins: this.plugins,
        toolbar: this.toolbar,
        branding: false,
        menubar: false,
        toolbar_drawer: false,
        //这个是图片上传的钩子，每次上传图片走这
        images_upload_handler: function(blobInfo, succFun, failFun) {
          let formData = new FormData();
          formData.set("file", blobInfo.blob());
          succFun('https://img-blog.csdnimg.cn/20181210163305356.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0,size_16,color_FFFFFF,t_70')
          return
          // 图片上传地址/sys/common/upload
          postAction("/sys/common/upload", formData)
            .then(res => {
              succFun(
                // 完成后这个方法返回完整的地址
                getFileAccessHttpUrl(
                  res.message,
                 window._CONFIG["staticDomainURL"],
                  "http"
                )
              );
            })
            .catch(res => {
              failFun("error");
              console.error(res);
            });
        }
      },
      myValue: this.value
    };
  },
  mounted() {
    tinymce.init({});
  },
  methods: {
    onClick(e) {
      this.$emit("onClick", e, tinymce);
    },
    //可以添加一些自己的自定义事件，如清空内容
    clear() {
      this.myValue = "";
    }
  },
  watch: {
    value(newValue) {
      this.myValue = newValue == null ? "" : newValue;
    },
    myValue(newValue) {
      if (this.triggerChange) {
        this.$emit("change", newValue);
      } else {
        this.$emit("input", newValue);
      }
    }
  }
};
</script>
<style scoped></style>
